
<template>
  <!-- 预览弹框 -->
  <el-dialog
    title="题目预览"
    :visible="showDialog"
    width="50%"
    @close="$emit('update:showDialog', false), (playBtn = false)"
  >
    <div style="border-bottom: 1px solid #333">
      <el-row>
        <el-col :span="6">
          <p>【题型】：{{ previewObj.questionType | initType }}</p>
        </el-col>
        <el-col :span="6">
          <p>【编号】：{{ previewObj.id }}</p>
        </el-col>
        <el-col :span="6">
          <p>【难度】：{{ previewObj.difficulty | initDifficulty }}</p>
        </el-col>
        <el-col :span="6">
          <p>【标签】：{{ previewObj.tags }}</p>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <p>【学科】：{{ previewObj.subject }}</p>
        </el-col>
        <el-col :span="6">
          <p>【目录】：{{ previewObj.catalog }}</p>
        </el-col>
        <el-col :span="6">
          <p>【方向】：{{ previewObj.direction }}</p>
        </el-col>
      </el-row>
    </div>
    <div style="border-bottom: 1px solid #333">
      <el-row> <p>【题干】：</p> </el-row>
      <el-row> <p>下列容器中是框架容器的是？</p> </el-row>
      <el-row> <p>单选题 选项：(以下选中的选项为正确答案)</p> </el-row>
      <el-row>
        <p><el-radio :label="previewObj.remarks"></el-radio></p>
      </el-row>
      <el-row>
        <p>
          <el-radio>{{ previewObj.remarks }}</el-radio>
        </p>
      </el-row>
      <el-row>
        <p><el-radio label=""></el-radio></p>
      </el-row>
      <el-row>
        <p><el-radio label=""></el-radio></p>
      </el-row>
    </div>
    <div style="border-bottom: 1px solid #333">
      <el-row>
        <p>
          【参考答案】：<el-button type="danger" @click="playBtn = true"
            >视频答案预览</el-button
          >
        </p>
        <el-row v-if="playBtn">
          <video
            src="http://www.iqiyi.com/w_19rzkd05pd.html"
            autoplay
            controls="controls"
          />
        </el-row>
      </el-row>
    </div>
    <div style="border-bottom: 1px solid #333">
      <el-row>
        <p>【答案解析】：{{ previewObj.videoURL }}</p>
      </el-row>
    </div>

    <el-row>
      <p>【题目备注】：{{ previewObj.remarks }}</p></el-row
    >

    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="$emit('update:showDialog', false)"
        >关闭</el-button
      >
    </span>
  </el-dialog>
  <!-- /预览弹框 -->
</template>

<script>
export default {
  // props: ['showDialog', 'previewObj']
  props: {
    showDialog: {
      type: Boolean
    },
    previewObj: {
      type: Object
    }
  },
  data () {
    return {
      playBtn: false
    }
  },
  methods: {
    // btnCannel () {
    //   console.log(11)
    // }
  }
}
</script>

<style></style>
